<template>
    <div class="msg_center">
        <header>消息中心</header>
        <div class="content">
            <div class="send_dates">
                <p>发送日期：</p>
                <div class="sel_date">
                    <el-date-picker v-model="value1" type="daterange" align="right" unlink-panels range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions1"> </el-date-picker>
                </div>
                <div class="buttons">
                	<el-button type="danger" style="background:#e7251a;" @click.native="querys">查询</el-button>
                    <el-button @click.native="resets">重置</el-button>
                </div>
            </div>
            <div class="group_send">
            	<el-button type="danger" style="background:#e7251a;" @click.native="sends">群发消息</el-button>
            </div>
            <div class="selected" v-if="selectArr.length>0">
                <p>
                    <img src="../../assets/images/market/select2.png" alt="" />
                    <span>已选择&nbsp;
                        <label>{{selectArr.length}}</label>&nbsp;项</span>
                </p>
            </div>
            <div class="tables">
                <el-table v-loading="loading" :data="actList" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="50"> </el-table-column>
                    <el-table-column prop="TITLE" label="消息标题" width="300"> </el-table-column>
                    <el-table-column prop="MESSAGE" label="消息内容" width="500"> </el-table-column>
                    <el-table-column prop="CREATEDATE" label="发送日期" width="200">
                        <template slot-scope="scope">
                            <span v-if="scope.row.CREATEDATE">{{ scope.row.CREATEDATE | filterTimess }}</span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="NUM" label="发送人数" width="150"> </el-table-column>                    
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page1" :page-sizes="[6, 8, 10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.COUNT"> </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "msg_center",
        data() {
            return {
                value1: '', //发送日期
                pickerOptions1: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                selectArr:[],
                loading:true,
                tableDatas:'',
                page1:1,
                pageSize1:6,
            };
        },
        computed: {
            //请求参数
            objs() {
            	let obj = {};
                obj.PAGE_NO = this.page1;
                obj.PAGE_SIZE = this.pageSize1;
                if(this.value1.length > 0){
                	obj.STARTTIME = this.value1[0].getTime();
                	obj.ENDTIME = this.value1[1].getTime();
                }
                return obj;
            },
            //分页数据
            actList() {
            	if(this.tableDatas.MESSAGETEMPLATEARR) {
                    return this.tableDatas.MESSAGETEMPLATEARR;
                }
            },
        },
        created() {
        	this.getList();
        },
        methods: {
        	//消息中心列表
        	getList(){
        		this.$axiosPost('/4SCAFE/MessageTemplate/getMessageTemplateList.action', this.objs).then(res => {
                    this.loading = true;
                    if(res.STATUS_CODE === 1) {
                        this.loading = false;
                        this.tableDatas = res;
                    }                    
                })
        	},
        	//查询
        	querys(){
        		this.getList();
        	},
        	//重置
        	resets(){
        		this.value1 = '';
        	},
        	//群发消息
        	sends(){
        		this.$router.push({
        			path:'/message/groupSendMsg'
        		})
        	},
        	handleSelectionChange(val) {
                this.selectArr = val;
                //console.log(this.selectArr);
            },
            handleSizeChange(val) {
            	this.loading = true;
                this.pageSize1 = val;
                this.getList();
            },
            handleCurrentChange(val) {
            	this.loading = true;
                this.page1 = val;
                this.getList();
            },
        },
    };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .msg_center {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .content {
            width: 97%;
            margin: 25px auto;
            padding: 15px 25px;
            background: #fff;
            .send_dates{
            	display:flex;
            	align-items:center;
            	.buttons{
            		margin-left:70px;
            	}
            }
            .group_send{
            	margin:40px 0 20px 0;
            }
            .selected {
                margin-top: 15px;
                border: 1px solid #f0f0f0;
                border-radius: 5px;
                background: #fafafa;
                p {
                    display: flex;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 20px;
                        margin: 0 10px;
                    }
                    span {
                        font-size: 16px;
                        color: #717a7d;
                        label {
                            color: #e7251a;
                        }
                    }
                }
            }
            .tables {
                margin-top: 30px;
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
                .opretions {
                    color: #1d93ff;
                    cursor: pointer;
                    margin: 0 2px;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
</style>